<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
  
    .abc {
      /* px vh vw  */
      /* width: 100px;
      height: 100px;
      background-color: red; */
      /* view width */
      /* width: 100vw;  */
      /* view height */
      /* height: 100vh; */

      /* 1rem */
      /* width: 1.5625rem;
      height: 1.5625rem; */
      /* width: 1rem; */
      /* height: 1rem; */
      width: 1.5625rem;
      height: 1.5625rem;
      font-size: .25rem;
      background-color: red;
    }
  </style>
  <body>
    <div class="abc">欢欢  </div>
     <!-- 1280px / 20 = 64px === 1rem -->
     <!-- 800px / 20 = 40px === 1rem -->
     <!-- js -->
    <script src="./js/flexible.js"></script>
  </body>
</html>

<!-- 根元素上font-size的大小

1280 / 20 = 64px
1rem = 64px -->
